<!--TODO: "Creature Type" and "Stances"-->

<form [formGroup]="formGroup" class="form-group edit-form">
  <div class="row">
    <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
      <label class="control-label" for="InterruptFlags">InterruptFlags</label>
      <input [formControlName]="'InterruptFlags'" id="InterruptFlags" type="number" class="form-control form-control-sm" />
    </div>

    <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
      <label class="control-label" for="AuraInterruptFlags">AuraInterruptFlags</label>
      <input [formControlName]="'AuraInterruptFlags'" id="AuraInterruptFlags" type="number" class="form-control form-control-sm" />
    </div>

    <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
      <label class="control-label" for="ChannelInterruptFlags">ChannelInterruptFlags</label>
      <input [formControlName]="'ChannelInterruptFlags'" id="ChannelInterruptFlags" type="number" class="form-control form-control-sm" />
    </div>
  </div>

  <div class="row">
    <div
      class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2"
      *ngFor="let suffix of ['', 'Ex', 'Ex2', 'Ex3', 'Ex4', 'Ex5', 'Ex6', 'Ex7']"
    >
      <label class="control-label" [for]="'Attributes' + suffix">Attributes{{ suffix }}</label>
      <input [formControlName]="'Attributes' + suffix" [id]="'Attributes' + suffix" type="number" class="form-control form-control-sm" />
    </div>
  </div>
</form>
